<template>
  <view class="content">
    <!-- 商务合作 -->
    <view class="title flex-y flex-x-center flex-y-center">
      <view class="fz44 bold">商务合作申请填写</view>
      <view class="mt30 fz30 gray6">请仔细填写，确保工作人员能联系到您</view>
    </view>

    <uni-forms
      class="form"
      ref="formRef"
      :modelValue="state.formData"
      :rules="state.rules"
      label-width="100px"
      label-align="right"
    >
      <uni-forms-item label="联系人" name="userName" required>
        <uni-easyinput
          type="text"
          v-model="state.formData.userName"
          placeholder="请输入联系人"
        />
      </uni-forms-item>
      <uni-forms-item label="联系号码" name="mobile" required>
        <uni-easyinput
          v-model="state.formData.mobile"
          type="text"
          placeholder="请输入手机号码"
        />
      </uni-forms-item>
      <uni-forms-item label="微信号">
        <uni-easyinput
          v-model="state.formData.wechatId"
          type="text"
          placeholder="请输入微信号"
        />
      </uni-forms-item>
      <uni-forms-item label="地区" name="district" required>
        <uni-easyinput
          v-model="state.formData.district"
          type="text"
          placeholder="请输入地区"
        />
      </uni-forms-item>
      <uni-forms-item label="详细地址">
        <uni-easyinput
          v-model="state.formData.address"
          type="text"
          placeholder="请输入详细地址"
        />
      </uni-forms-item>
      <uni-forms-item label="申请信息">
        <uni-easyinput
          v-model="state.formData.applyMessage"
          maxlength="200"
          type="textarea"
          placeholder="请输入申请信息(200字以内)"
        />
      </uni-forms-item>
    </uni-forms>

    <view class="btn-box">
      <view class="t-c gray9 fz28">工作人员将会在48小时内联系您</view>
      <button
        class="btn mt20 fff main-theme-bgcolor"
        form-type="submit"
        :disabled="state.isSend"
        @click="onSubmit"
      >
        提交申请
      </button>
    </view>

    <filings-modal></filings-modal>

    <a
      class="service bdr-circle bg-green flex-y flex-y-center flex-x-center scale-in-out"
      :href="state.phone"
    >
      <sw-icons size="30" icon="icon-kefu" color="#fff"></sw-icons>
      <text class="mt10 fff fz24">咨询</text>
    </a>
  </view>
</template>

<script setup>
import filingsModal from "@/components/filings/index.vue";
import { ref, reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { addBusinessApplication } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();

const formRef = ref(null);

const state = reactive({
  isSend: false,
  phone: "",
  // 表单数据
  formData: {
    userName: "",
    mobile: "",
    wechatId: "",
    district: "",
    address: "",
    applyMessage: "",
  },
  rules: {
    // 对name字段进行必填验证
    userName: {
      rules: [
        {
          required: true,
          errorMessage: "请输入姓名",
        },
      ],
    },
    // 对phone字段进行必填验证
    mobile: {
      rules: [
        {
          required: true,
          errorMessage: "请填写手机号码",
        },
        {
          minLength: 11,
          maxLength: 11,
          errorMessage: "请输入正确手机号码",
        },
      ],
    },
    district: {
      rules: [
        {
          required: true,
          errorMessage: "请输入地区",
        },
      ],
    },
  },
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  state.phone = `tel:${getApp().globalData.phone}`;
});

// 触发提交表单
const onSubmit = () => {
  formRef.value.validate().then(() => {
    state.isSend = true;
    addBusinessApplication(state.formData)
      .then((res) => {
        uni.showToast({
          icon: "success",
          title: "申请成功",
        });
        state.formData = {
          userName: "",
          mobile: "",
          wechatId: "",
          district: "",
          address: "",
          applyMessage: "",
        };
      })
      .finally(() => {
        state.isSend = false;
      });
  });
};
</script>

<style lang="less" scoped>
// @import url('@/common/less/common.less');
.title {
  height: 204rpx;
}

.form {
  padding: 20rpx;
}

.btn-box {
  padding: 0 40rpx 20rpx;
}

.service {
  position: fixed;
  bottom: 240rpx;
  right: 40rpx;
  z-index: 90;
  width: 100rpx;
  height: 100rpx;
}
</style>
